<template>
  <div class="wk-node">
    <el-popover
      placement="right"
      width="440"
      trigger="manual"
      style="padding: 0"
      v-model="popoverShow"
    >
      <div class="node_set">
        <div class="title color-02 mb-10">流程设置</div>
        <div class="node_item">
          <label for="">设置审批人</label>
          <!-- <el-input placeholder="请选择"></el-input> -->
          <el-select v-model="nodeItem.examineType" style="width: 100%">
            <el-option label="指定成员" :value="1"></el-option>
            <el-option label="指定角色" :value="3"></el-option>
          </el-select>
        </div>
        <div class="node_item">
          <label for=""
            >选择{{ nodeItem.examineType == 1 ? "成员" : "角色" }}</label
          >
          <relate-empoyee
            v-if="nodeItem.examineType == 1"
            :visible="false"
            :show-input="true"
            :isShowName="true"
            :user-id="nodeItem.userList"
            ref="relate_empoyee"
            @save="employeesSave($event, 1)"
            style="width: 100%"
          />
          <user-employee-select
            style="width: 100%"
            v-if="nodeItem.examineType == 3"
            ref="roleSelect"
            v-model="nodeItem.roleId"
            :props="{
              onlyShowRole: true,
            }"
            clearable
            @change="roleSelectChange"
          />
        </div>
        <div class="node_item">
          <label for="">审批方式（审批人为多人需要选择）</label>
          <!-- <el-input placeholder="请选择"></el-input> -->
          <el-radio-group v-model="nodeItem.type">
            <el-radio :label="1" class="el-radio--block">依次审批</el-radio>
            <el-radio :label="2" class="el-radio--block">会签</el-radio>
            <el-radio :label="3" class="el-radio--block">或签</el-radio>
          </el-radio-group>
        </div>
        <div class="node_item">
          <label for="">设置抄送人</label>
          <!-- <el-input placeholder="请选择"></el-input> -->
          <el-select v-model="nodeItem.examineCCBo.type" style="width: 100%">
            <el-option label="指定角色" :value="0"></el-option>
            <el-option label="指定部门" :value="1"></el-option>
            <el-option label="指定人员" :value="2"></el-option>
            <el-option label="指定数据权限" :value="3"></el-option>
          </el-select>
        </div>
        <div class="node_item">
          <label for=""
            >选择{{
              nodeItem.examineCCBo.type == 0
                ? "角色"
                : nodeItem.examineCCBo.type == 1
                ? "部门"
                : nodeItem.examineCCBo.type == 2
                ? "人员"
                : nodeItem.examineCCBo.type == 3
                ? "数据权限"
                : ""
            }}</label
          >
          <!-- 人员 -->
          <relate-empoyee
            v-if="nodeItem.examineCCBo.type == 2"
            :visible="false"
            :show-input="true"
            :isShowName="true"
            :user-id="nodeItem.examineCCBo.userId"
            ref="relate_empoyee"
            @save="employeesSave($event, 2)"
            style="width: 100%"
          />
          <!-- 部门 -->
          <manage-dep
            v-if="nodeItem.examineCCBo.type == 1"
            style="width: 100%"
            @submitDeps="manageDepSave"
            :manageDeptId="nodeItem.examineCCBo.deptId"
            :showIpt="true"
            :visible="false"
            :isShowName="true"
          />
          <!-- 成员 -->
          <user-employee-select
            multiple
            style="width: 100%"
            v-if="nodeItem.examineCCBo.type == 0"
            ref="roleSelect1"
            v-model="nodeItem.examineCCBo.roleId"
            :props="{
              onlyShowRole: true,
            }"
            clearable
          />
          <!-- 数据权限 -->
          <el-select
            v-model="nodeItem.examineCCBo.fieldList"
            style="width: 100%"
            v-if="nodeItem.examineCCBo.type == 3"
            multiple
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item, index) in authList"
              :disabled="item.disabled"
              :key="index"
            ></el-option>
          </el-select>
          <p class="mt-10">说明：审批人员为空时将自动转交管理员</p>
        </div>
        <div class="dialog-footer d-flex justify-content-end">
          <el-button @click="() => (popoverShow = false)">取消</el-button>
          <el-button type="primary" @click="nodeItemClick(nodeItem)"
            >确定</el-button
          >
        </div>
      </div>
      <div
        slot="reference"
        :class="{
          'is-first': !visibleArrow,
          'is-error': node.isError,
          'is-disabled': disabled,
        }"
        class="wk-node-wrap"
        @click="click"
      >
        <div
          :style="{
            backgroundColor: headerColor,
            borderTop:
              headerColor == '#FAEEDA'
                ? '4px solid #FCAD22'
                : '4px solid #0066F9',
            color: headerColor == '#FAEEDA' ? '#FCAD22' : '#3C8CFF',
          }"
          class="header"
        >
          <el-input
            v-if="isEdit"
            ref="wkFlowInput"
            v-model="node.name"
            type="text"
            size="mini"
            @blur="isEdit = false"
          />
          <span v-else class="title" @click.stop="titleEditClick">{{
            node.name
          }}</span>
          <i
            v-if="!disabled"
            class="el-icon-close close"
            @click.stop="deleteClick"
          />
        </div>
        <div class="body">
          <div v-if="disabled" class="content">{{ node.content }}</div>
          <div v-else class="content">{{ getContent() }}</div>
          <i v-if="!disabled" class="el-icon-arrow-right" />
        </div>
      </div>
    </el-popover>
    <div class="add-node-btn-wrap">
      <add-node-btn @command="handleCommand" />
    </div>
  </div>
</template>

<script>
import UserEmployeeSelect from "@/views/admin/crm/components/UserEmployeeSelect";
import RoleEmployeeSelect from "@/views/admin/employeeDep/components/RoleEmployeeSelect.vue";
import RelateEmpoyee from "@/views/admin/components/RelateEmpoyee"; // 人员选择器
import manageDep from "@/views/admin/components/manageDep"; // 部门选择器

import AddNodeBtn from "./AddNodeBtn";
import { examineModel, conditionListModel } from "./flowModel";
import { examineTypeObj, wayTypeObj } from "./nodeModel";
import { objDeepCopy } from "@/utils";
import { queryTrainingStatusAPI } from "@/api/admin/training";
export default {
  // 审批人 发起人
  name: "WkNode",

  components: {
    AddNodeBtn,
    UserEmployeeSelect,
    RelateEmpoyee,
    RoleEmployeeSelect,
    manageDep,
  },

  mixins: [],

  props: {
    visibleArrow: {
      type: Boolean,
      default: true,
    },
    index: Number,
    disabled: {
      type: Boolean,
      default: false,
    },
    headerColor: {
      type: String,
      default: "#FAEEDA",
    },
    parent: Array,
    node: {
      type: Object,
      default() {
        return {};
      },
    },
  },

  data() {
    return {
      isEdit: false,
      examineTypeObj: examineTypeObj,
      sendLevelObj: {},
      topLevelObj: {},
      levelObj: {},
      popoverShow: false,
      authList: [], //数据权限下拉
    };
  },

  computed: {
    wayTypeObj: function () {
      return wayTypeObj;
    },
    nodeItem: function () {
      if (this.node.examineCCBo) {
        return this.node;
      } else {
        return { ...this.node, examineCCBo: { type: 1 } };
      }
    },
  },

  mounted() {
    // 数据权限下拉选项
    this.getTrainingSta();
  },

  methods: {
    getTrainingSta() {
      queryTrainingStatusAPI().then((res) => {
        this.authList = [
          {
            label: "线索创建人",
            value: "leads_create_id",
            disabled: false,
          },
          {
            label: "销售负责人",
            value: "owner_user_id",
            disabled: false,
          },
          {
            label: "助教协作人",
            value: "assistant_user_id",
            disabled: false,
          },
          {
            label: "营销讲师",
            value: "teacher_id",
            disabled: false,
          },
          {
            label: "退款负责人",
            value: "refund_user_id",
            disabled: false,
          },
        ];
        if (res.data === 0) {
          //训练营模式关闭
          this.authList.splice(3, 1, {
            label: "营销讲师",
            value: "teacher_id",
            disabled: true,
          });
        }
      });
    },
    /**
     * 编辑名称
     */
    titleEditClick() {
      if (!this.disabled) {
        this.isEdit = true;
        this.$nextTick(() => {
          this.$refs.wkFlowInput.focus();
        });
      }
    },

    /**
     * 删除
     */
    deleteClick() {
      this.parent.splice(this.index, 1);
    },

    /**
     * 添加
     */
    handleCommand(command) {
      this.parent.splice(this.index + 1, 0, objDeepCopy(examineModel));
      // if (command === "approve") {
      //   this.parent.splice(this.index + 1, 0, objDeepCopy(examineModel));
      // } else if (command === "condition") {
      //   this.parent.splice(this.index + 1, 0, objDeepCopy(conditionListModel));
      // }
    },

    /**
     * 获取内容
     * 指定成员：1.依次  展示员工名  2.或签/会签  展示N人或签/会签
上级：展示  第N级上级
角色：展示  角色名或签/会签
发起人自选：只展示类型名  发起人自选
连续多级主管：展示  从 直属上级 到 发起人向上的/组织架构中由上至下的第N级上级；当指定角色未勾选不超过发起人向上，展示 从 直属上级到 角色名
     */
    getContent() {
      const {
        examineType,
        type,
        userList,
        parentLevel,
        roleId,
        roleObj,
        overType,
        tempParentLevel,
      } = this.node;
      const examineTypeName = examineTypeObj[examineType];
      if (examineType === 1) {
        if (userList.length === 1) {
          return `${examineTypeName} 1人`;
        } else if (userList.length > 1) {
          return `${userList.length}人${this.wayTypeObj[type]}`;
        } else {
          return `请选择审批人`;
        }
      } else if (examineType === 3) {
        if (roleId) {
          return `${examineTypeName} 1人`;
        } else {
          return `请选择审批人`;
        }
      }
      return "";
    },

    /**
     * 点击
     */
    click() {
      if (!this.disabled) {
        this.popoverShow = true;
        this.$emit("node-click", this.$props);
      }
    },

    // 角色选择
    roleSelectChange() {
      this.$nextTick(() => {
        this.$emit("roleSelectChange", this.nodeItem.roleId);
      });
    },
    // 审批人成员选择器
    employeesSave(e, type) {
      this.$nextTick(() => {
        this.$emit("employeesSave", e, type);
      });
    },

    // 部门选择器
    manageDepSave(e) {
      this.$nextTick(() => {
        this.$emit("manageDepSave", e);
      });
    },

    // 审批弹框确认
    nodeItemClick(item) {
      this.popoverShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.node_set {
  .title {
    height: 40px;
    line-height: 40px;
    background: #eef4fb;
    padding-left: 15px;
  }

  .node_item {
    margin-bottom: 15px;
    label {
      display: block;
      width: 210px;
      margin-bottom: 10px;
    }
  }

  .dialog-footer {
    padding: 10px !important;
    background-color: #f7f8fa;
    border-top: 1px solid #e6e6e6;
  }
}
</style>
